<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="$t('fundMana.withDraw.发起提现')"
    width="600px"
    :confirmText="$t('fundMana.withDraw.发起提现')"
  >
    <div class="h-500 overflow-y-auto">
      <el-form 
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="p20"
      >
        <el-form-item :label="$t('fundMana.withDraw.提现金额')" prop="amount">
          <el-input 
            v-model="form.amount" 
            :placeholder="$t('fundMana.withDraw.请输入提现金额')"
            type="number"
          >
            <template #append>{{ $t('fundMana.withDraw.元') }}</template>
          </el-input>
        </el-form-item>

        <el-form-item :label="$t('fundMana.withDraw.提现原因')" prop="reason">
          <el-input 
            v-model="form.reason"
            type="textarea"
            :placeholder="$t('fundMana.withDraw.请输入提现原因')"
            :rows="3"
          />
        </el-form-item>

        <el-form-item :label="$t('fundMana.withDraw.银行卡号')" prop="bankNo">
          <el-input 
            v-model="form.bankNo"
            :placeholder="$t('fundMana.withDraw.请输入银行卡号')"
          />
        </el-form-item>

        <el-form-item :label="$t('fundMana.withDraw.银行地址')" prop="bankAddress">
          <el-input 
            v-model="form.bankAddress"
            :placeholder="$t('fundMana.withDraw.请输入银行地址')"
          />
        </el-form-item>

        <el-form-item :label="$t('fundMana.withDraw.手机号码')" prop="phone">
          <el-input 
            v-model="form.phone"
            :placeholder="$t('fundMana.withDraw.请输入手机号码')"
          />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import Dialog from "@/components/dialog.vue";

const { t } = useI18n();
const show = defineModel();
const formRef = ref(null);

const form = ref({
  amount: '',
  reason: '',
  bankNo: '',
  bankAddress: '',
  phone: ''
});

const validatePhone = (rule, value, callback) => {
  if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error(t('fundMana.withDraw.请输入正确的手机号码')));
  } else {
    callback();
  }
};

const rules = {
  amount: [
    { required: true, message: t('fundMana.withDraw.请输入提现金额'), trigger: 'blur' },
    { type: 'number', message: t('fundMana.withDraw.提现金额必须为数字'), trigger: 'blur' }
  ],
  reason: [
    { required: true, message: t('fundMana.withDraw.请输入提现原因'), trigger: 'blur' }
  ],
  bankNo: [
    { required: true, message: t('fundMana.withDraw.请输入银行卡号'), trigger: 'blur' },
    { min: 16, max: 19, message: t('fundMana.withDraw.银行卡号长度在16到19个字符'), trigger: 'blur' }
  ],
  bankAddress: [
    { required: true, message: t('fundMana.withDraw.请输入银行地址'), trigger: 'blur' }
  ],
  phone: [
    { required: true, message: t('fundMana.withDraw.请输入手机号码'), trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }
  ]
};

watch(show, (val) => {
  if (val) {
    form.value = {
      amount: '',
      reason: '',
      bankNo: '',
      bankAddress: '',
      phone: ''
    };
  }
});

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    if (valid) {
      console.log('提交表单:', form.value);
      // TODO: 处理提交逻辑
      close();
    }
  });
};

const close = () => {
  show.value = false;
};
</script>
<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
</style>
